<template>
  <mars-dialog title="图上标绘" width="320" :min-width="240" top="60" bottom="40" right="10">
    <div class="marker-list f-mb">
      <ul class="marker-list-ul">
        <li class="f-mr marker-list-li_icon" title="打开文件">
          <a-upload
            :multiple="false"
            name="file"
            accept="json,geojson"
            :file-list="fileList"
            :showUploadList="false"
            :supportServerRender="true"
            :beforeUpload="() => false"
            @change="onClickMarkerOpenfile"
          >
            <mars-icon icon="folder-open" width="18"></mars-icon>
          </a-upload>
        </li>

        <li class="f-mr marker-list-li_icon" title="叠加文件">
          <a-upload
            :multiple="false"
            name="file"
            accept="json,geojson"
            :file-list="fileList"
            :showUploadList="false"
            :supportServerRender="true"
            :beforeUpload="() => false"
            @change="onClickMarkerOverfile"
          >
            <mars-icon icon="seo-folder" width="18"></mars-icon>
          </a-upload>
        </li>
        <li class="f-mr marker-list-li_icon" title="保存文件" @click="onClickMarkerSavefile">
          <mars-icon icon="save-one" width="18"></mars-icon>
        </li>
        <li class="f-mr">|</li>

        <li class="f-mr marker-list-li_icon" title="清空标记" @click="onClickMarkerDeleteAll">
          <mars-icon icon="delete" width="18"></mars-icon>
        </li>
        <li class="f-mr marker-list-li_icon" title="是否可编辑" @click="onClickMarkerEditor">
          <mars-icon v-show="lockEditor" icon="unlock" width="18"></mars-icon>
          <mars-icon v-show="!lockEditor" icon="lock" width="18"></mars-icon>
        </li>

        <li class="f-mr marker-list-li_icon" title="是否绑定Popup" @click="onClickPopup">
          <mars-icon v-show="isShowPopup" icon="file-display" width="18"></mars-icon>
          <mars-icon v-show="!isShowPopup" icon="file-hiding" width="18"></mars-icon>
        </li>
      </ul>
    </div>

    <div class="marker-content">
      <plot-graphic-list v-if="activeTab === 'list'" />
      <plot-data-tree v-if="activeTab === 'tree'" />
    </div>
    <template #footer>
      <div class="plot_tab">
        <a-tabs v-model:activeKey="activeTab" centered type="card" tabPosition="bottom">
          <a-tab-pane key="list" tab="标号"></a-tab-pane>
          <a-tab-pane key="tree" tab="列表"></a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </mars-dialog>
</template>
<script setup lang="ts">
import { ref, onUnmounted } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import plotGraphicList from "./plot-graphic-list.vue"
import plotDataTree from "./plot-data-tree.vue"
import { useWidget } from "@mars/common/store/widget"
import * as mapWork from "./map"

const { activate, disable, updateWidget, isActivate } = useWidget()

onUnmounted(() => {
  disable("graphic-options")

  updateWidget("toolbar", "plot")
})

// 启用map.ts生命周期
useLifecycle(mapWork)
const activeTab = ref("list")

mapWork.eventTarget.on("plot_graphicEditor", (event) => {
  if (event.disable) {
    disable("graphic-options")
  } else {
    const data = { layerId: event.layerId, graphicId: event.graphicId }
    if (!isActivate("graphic-options")) {
      const isOpen = event.isOpen ?? true
      isOpen && activate({ name: "graphic-options", data })
    } else {
      updateWidget("graphic-options", data)
    }
  }
})

// 是否编辑
const lockEditor = ref(true)
const onClickMarkerEditor = () => {
  lockEditor.value = !lockEditor.value

  mapWork.onClickMarkerEditor(lockEditor.value)
}

// ****************************文件************************* //
interface FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}

interface FileInfo {
  file: FileItem
  fileList: FileItem[]
}

const fileList = ref<FileItem>()

// 保存文件
const onClickMarkerSavefile = () => {
  mapWork.onClickMarkerSavefile()
}

// 打开文件
const onClickMarkerOpenfile = (info: FileInfo) => {
  activeTab.value = "list"
  mapWork.impFile(info.file, true)
}

// 叠加文件
const onClickMarkerOverfile = (info: FileInfo) => {
  mapWork.impFile(info.file, false)
}

// 清除
const onClickMarkerDeleteAll = () => {
  activeTab.value = "list"
  mapWork.onClickMarkerDeleteAll()
}

// 是否显示popup
const isShowPopup = ref(false)
const onClickPopup = () => {
  isShowPopup.value = !isShowPopup.value
  mapWork.isShowPopup(isShowPopup.value)
}
</script>

<style lang="less">
.marker-list {
  width: 100%;

  .marker-list-ul {
    display: flex;
    align-items: center;
  }

  .marker-list-li_icon {
    padding: 0 5px;
    cursor: pointer;
  }
}

.marker-content {
  height: calc(100% - 50px);
}

.plot_tab {
  width: 100%;
  height: 39px;
  position: relative;

  .ant-tabs {
    height: 100%;

    .ant-tabs-nav {
      margin: 0;
      background: #3a404f;

      &::before {
        border: none !important;
      }

      .ant-tabs-nav-wrap {
        .ant-tabs-nav-list {
          width: 100%;
          justify-content: space-around;

          .ant-tabs-tab {
            border: none;
            border-bottom: 2px solid rgba(0, 0, 0, 0);
            color: var(--mars-text-color);
            background: none !important;
          }
        }
      }
    }

    .ant-tabs-content-holder {
      height: calc(100% - 60px);

      .ant-tabs-content {
        height: 100%;
        overflow-x: hidden;
      }
    }
  }
}
</style>
